<!DOCTYPE html>
<html lang="pt-br">
<head>
	<meta charset="UTF-8">
	<title>VoIPBelém</title>
	<link href="../lib/css/estilo.css" rel="stylesheet">
   
	<style>

	.exemplo1{
		display: inline-block;
		border: 1px dashed #000;
		padding: 10px;
		background: #ffffa2;
		height: 20px;
		opacity: 0.3;
		
		-moz-transition: width 1s ease-out, opacity 1s ease;
		-webkit-transition: width 1s ease-out, opacity 1s ease;
		-o-transition: width 1s ease-out, opacity 1s ease;
		transition: width 1s ease-out, opacity 1s ease;
		}
 
	.exemplo1:hover {
		height: 20px;
		opacity: 1;
		width: 400px;
		}

	.exemplo2 {
		position: relative;
		display: inline-block;
		border: 1px dashed #000;
		padding: 10px;
		background: #ffffa2;
		height: 20px;
		opacity: 0.3;
		margin:0 0 0 20px;
		text-decoration: none;
		
		-moz-transition: all 1s ease;
		-webkit-transition: all 1s ease;
		-o-transition: all 1s ease;
		transition: all 1s ease;
		}

	.exemplo2:hover {
		opacity: 1;
		
		-moz-transform: scale(2) rotate(30deg) translate(50px);
		-webkit-transform: scale(1.2) rotate(30deg) translate(50px);
		-o-transform: scale(2) rotate(30deg) translate(50px);
		transform: scale(2) rotate(30deg) translate(50px);
		
		z-index: 1000;
		}

</style>
   
</head>
<body>
	<header>
    <ul>
    	<li id="logo">
        	<span class="voip">VoIP</span><span class="belem">Belém</span>
        </li>
        <li class="menuTopo">
            <ul>
                <li>QUEM SOMOS</li>
                <li>VoIP</li>
                <li>SERVIÇOS</li>
                <li>FAQ</li>
                <li>FALE CONOSCO</li>
            </ul>
        </li>
	</ul>
    </header>
	
    <div class="subTopo">
    	<div class="subTopoConteudo">
        	<div class="bannerPromo">
            	ECONOMIZE ATÉ 80% EM SUAS LIGAÇÕES DE LONGA DISTÂNCIA NACIONAIS E INTERNACIONAIS
            </div>
            <div class="bannerPrincipal">
            	<img src="../lib/imgs/banner.jpg" alt="VoIP" class="banner1">
                <img src="../lib/imgs/banner2.jpg" alt="VoIP" class="banner2">
            </div>
        </div>
    </div>
    
    <div>
    	Conteúdo!
        <div class="exemplo1">Exemplo 1
        </div>
        <div class="exemplo2">Exemplo 2
        </div>
    </div>
    
    <footer>
		<span>VoIP Belém - © 2009-2012</span>
		<span>Av. Duque de Caxias 740 - Marco - 66093-400 - Belem-PA | +55 91 3226.3467</span>
    </footer>
</body>
</html>